

  
/* Basic reset for buttons to ensure consistency across browsers */
button {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-size: 16px;
    vertical-align: baseline;
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
    -webkit-appearance: none; /* for Safari and Chrome */
    -moz-appearance: none;  /* for Firefox */
    appearance: none;
    cursor: pointer;
    border: 1px solid #007bff; /* Gray border */
    background-color: #007bff;
    transition: background-color 0.3s;
    padding: 10px 20px;
    border-radius: 4px;
    color: white;
  }
  
  
  /* 按钮样式 */
  button:hover {
    background-color: #1574da;
  }
  
  
  /* Active (pressed) effect */
  button:active {
    background-color: #1574da; /* Even darker blue background when pressed */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* Inset shadow when pressed */
  }
  
  /* Gray button style */
  .gray-button {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    outline: none;
    border-radius: 5px;
    border: 1px solid #6c757d; /* Gray border */
    background-color: #6c757d; /* Gray background */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  }
   
  .gray-button:hover {
    background-color: #5a6268; /* Darker gray background on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
   
  .gray-button:active {
    background-color: #495057; /* Even darker gray background when pressed */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }
   
  /* White button style with dark text */
  .white-button {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    outline: none;
    border-radius: 5px;
    border: 1px solid #8b96a1; /* Dark gray border */
    background-color: #ffffff; /* White background */
    color: #8b96a1; /* Dark gray text */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  }
   
  .white-button:hover {
    background-color: #f8f9fa; /* Slightly darker white background on hover */
    color: #212529; /* Even darker text on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
   
  .white-button:active {
    background-color: #e9ecef; /* Even darker white background when pressed */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }
   
  /* Orange button style */
  .orange-button {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    outline: none;
    border-radius: 5px;
    border: 1px solid #ffc107; /* Orange border */
    background-color: #ffc107; /* Orange background */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  }
   
  .orange-button:hover {
    background-color: #e0a800; /* Darker orange background on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
   
  .orange-button:active {
    background-color: #cd9500; /* Even darker orange background when pressed */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }
   
  /* Red button style */
  .red-button {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    outline: none;
    border-radius: 5px;
    border: 1px solid #dc3545; /* Red border */
    background-color: #dc3545; /* Red background */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  }
   
  .red-button:hover {
    background-color: #c82333; /* Darker red background on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
   
  .red-button:active {
    background-color: #b01d28; /* Even darker red background when pressed */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }